<template>
    <view class="numberBox x-f tc">
        <view class="reduce" @tap="reduce">-</view>
        <view class="value">
            <input v-model="item.sale_count" disabled="disabled"/>
        </view>
        <view class="add" @tap="add">+</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                value: 1,
            }
        },
		props: {
				item: {
					type: Object,
					default: {}
				},
				index: {
					type: Number,
					default: 0
				}
		},
        methods:{
			// 减少
            reduce() {
                this.$emit('reduce', this.item, this.index)
            },
            // 增加
            add() {
                this.$emit('add', this.item, this.index)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .numberBox {
        display: flex;
        width: 204rpx;
        border: 1px solid #a3a3a3;
        border-radius: 10rpx;
        margin-left: 20rpx;
        height: 50rpx;
        line-height: 46rpx;
        .reduce {
            width: 64rpx;
            border-right: 1px solid #a3a3a3;
            height: 100%;
        }
        .value {
            flex: 1;
        }
        .add {
            width: 64rpx;
            border-left: 1px solid #a3a3a3;
            height: 100%;
        }
    }
</style>
